import ScrollView from '@/base-ui/scroll-view'
import LongForItem from '@/components/longfor-item'
import SelectionHeader from '@/components/selection-header'
import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { LongForWrapper } from './style'

const HomeLongFor = memo((props) => {
  const { infoData } = props

  return (
    <LongForWrapper>
      <SelectionHeader title={infoData.title} subtitle={infoData.subtitle} />
      <div className="longfor-content">
        <ScrollView>
          {
            infoData.list.map((item) => {
              return <LongForItem key={item.city} itemData={item} />
            })
          }
        </ScrollView>
      </div>
    </LongForWrapper>
  )
})

HomeLongFor.propTypes = {
  infoData: PropTypes.object
}

export default HomeLongFor